<template>
    <div>
        <table class="stu-table">
            <tr>
                <th>
                    读者ID
                </th>
                <th>
                    姓名
                </th>
                <th>
                    性别
                </th>
                <th>
                    生日
                </th>
                <th>
                    读者类型
                </th>
                <th>
                    手机号 
                </th>
                <th>
                    空间权限
                </th>
                <th>
                    操作
                </th>

            </tr>
            <tr v-for="(sutdent) in userInfo" :key="sutdent.id">
                <td>{{sutdent.id}}</td>
                <td>{{sutdent.name}}</td>
                <td>{{sutdent.sex ? "男":"女"}}</td>
                <td>{{sutdent.birthday}}</td>
                <td>{{sutdent.type}}</td>
                <td>{{sutdent.mobile}}</td>
                <td>{{sutdent.readroot}}</td>
                <td>
                    <button @click="upUser(sutdent.id)"  >修改</button>
                    <button @click="dele(sutdent.id)" >删除</button>
                </td>

            </tr>

        </table>
        <div class="page">
           <el-pagination
            @size-change ="sizeChange"
             @current-change = "nowpage"
             :hide-on-single-page ="true"
                background
                :page-size="10"
                :current-page="curPage"
                layout="prev, pager, next"
                :total="getCount">
          </el-pagination>
      </div>
        
    </div>
</template>

<script>
export default {
    data(){
        return{
            userInfo:null,
            count:0,
            curr:1,
        }
    },
    methods:{
      upUser(id){//跳转到用户信息修改页面
        this.$router.push({name:"upUser",query:{
            id
        }});
      },
     async dele(id){//向服务器提交删除用户
          const result = await this.$axios.delete("/api/admin/deleteUser",{
            params:{
                id
            }
          });
          if(result){
              this.$message({
                      showClose: true,
                      message: '删除成功！',
                      type: 'success'
                });
          const re =  await this.$axios.get("/api/admin/getUser",{
                            params:{
                            page:this.curr,
                            }
                                  })
            this.userInfo = re.rows;
            this.count = re.count;   
          }else{
              this.$message({
                      showClose: true,
                      message: '删除失败！',
                      type: 'error'
                });
          }

      },
    async nowpage(e){
      this.curr = e;//获取学生数据，默认第一页，e为页数
      const result = await this.$axios.get("/api/admin/getUser",{
        params:{
          page:e,
        }
      })

     this.userInfo = result.rows.map((stu)=>{
        //    stu.birthday = stu.birthday.substr(0,10);
          stu.birthday =  stu.birthday.substr(0,10) 
           return stu;
       });

       this.count = result.count;

    },
     sizeChange(){
         console.log("sadasdsdassadas");
     }
    },
   async created(){
       const result = await this.$axios.get('/api/admin/getUser');
       console.log(result);
       if(!result){
           alert("发生故障！");
           return;
       }
       this.userInfo = result.rows.map((stu)=>{
        //    stu.birthday = stu.birthday.substr(0,10);
          stu.birthday =  stu.birthday.substr(0,10) 
           return stu;
       });
       this.count = result.count;

   },
   computed:{
       curPage(){
      return this.curr
    },
    getCount(){
        return  this.count;
    }
   }
}
</script>
<style lang="less">
.stu-table{

    padding: 15px;
    tr{
        padding: 5px;
    }


}



</style>